<template>
	<view>
		<uv-cell-group>
			<block v-for="(item, index) in mySet" :key="index">
				<uv-cell v-if="['select', 'input', 'slider'].includes(item.type)" :title="item.name" cellStyle="{font-size:28rpx;}" :isLink="true" @click="showSetting(item)">
					<template v-slot:value>
						<text>{{ item.value }}</text>
					</template>
				</uv-cell>
				<uv-cell v-else :title="item.name" cellStyle="{font-size:28rpx;}">
					<template v-slot:value>
						<uv-switch v-if="item.type === 'switch'" :inactiveValue="0" :activeValue="1" v-model="item.value" @change="sendCommand(item)"></uv-switch>
					</template>
				</uv-cell>
			</block>
		</uv-cell-group>
		<uv-popup ref="popup" mode="bottom">
			<view class="title">
				<text>{{ actionItem.name }}</text>
			</view>
			<view style="padding:12rpx 0;">
				<block v-if="actionItem.type === 'slider'"><uv-slider show-value v-model="actionItem.value"></uv-slider></block>
				<block v-if="actionItem.type === 'input'">
					<view style="padding:0 25rpx;">
						<uv-input type="text" :placeholder="actionItem.name" v-model="actionItem.value" border="surround" clearable>
							<template v-slot:suffix>
								{{ actionItem.suffix || '' }}
							</template>
						</uv-input>
					</view>
				</block>
			</view>
			<uv-button type="primary" style="margin:25rpx;" @click="sendCommand(actionItem)">确定</uv-button>
		</uv-popup>
	</view>
</template>

<script>
import { mySet } from '@/util/constant';
import { toast, modal } from '@/util';
export default {
	data() {
		return {
			mySet: {},
			actionItem: {}
		};
	},
	created() {
		this.mySet = this.formatData(mySet);
	},
	methods: {
		formatData(attr) {
			return attr.map(val => {
				val.value = uni.getStorageSync(val.namekey) || val.value;
				return val;
			});
		},
		showSetting(item) {
			this.actionItem = item;
			if (['slider', 'input'].includes(item.type)) {
				this.open();
			}
		},
		open() {
			this.$refs.popup.open();
		},
		sendCommand(item, title) {
			this.$store.commit(`user/SET_${item.namekey.toUpperCase()}`, item.value);
			uni.setStorageSync(item.namekey, item.value);
			toast('操作成功');
		}
	}
};
</script>

<style lang="scss">
.title {
	text-align: center;
	height: 96rpx;
	line-height: 96rpx;
	text {
		font-weight: bold;
		border-bottom: 4rpx solid #3c9cff;
		padding-bottom: 12rpx;
	}
}
</style>
